<template>
  <div class="mapBox">
    可以实现：1.天地图 2.自定义dom的marker 3.形状 4.echarts & leaflet 5.popup结合marker 6.gif marker
    <div class="panel">
      <div class="panel-btn" @click="zoomAndCenter">animate</div>
    </div>
    <div id="map">
      <div class="popup" ref="popup">{{ latlng }}</div>
    </div>
  </div>
</template>
  
  <script>
import L from "leaflet";
import {
CHART_CONFIG,
createBackgroundTileLayerUrl,
createMap,
createMarker,
createMarkerBatch,
createMarkTileLayerUrl,
getLatlngByPopUp,
onMakerHoverBatch,
onMakerOutBatch,
POS_JYDS,
POS_MARKERS
} from "../utils";

import * as echarts from "echarts";

export default {
  name: "PureLeaflet",
  data() {
    return {
      map: null,
      latlng: "位置",
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let map = (this.map = createMap());
      // 底图
      L.tileLayer(createBackgroundTileLayerUrl()).addTo(map);
      // 注记
      L.tileLayer(createMarkTileLayerUrl()).addTo(map);
      // 交银大厦
      this.polygon = L.polygon(POS_JYDS).addTo(map);
      // popup展示坐标

      getLatlngByPopUp(map);


      // echarts marker
      const divIcon = L.divIcon({
        className: "leaflet-echart-icon",
        iconSize: [50, 50],
      });

      const allMakers = this.allMakers = createMarkerBatch(map, POS_MARKERS, divIcon);

      document.querySelectorAll('.leaflet-echart-icon').forEach(chart=>{
        var Chart1 = echarts.init(chart);
        Chart1.setOption(CHART_CONFIG);
      })

      // gif marker
      const gifMarker = createMarker(map, [45.765437, 126.585824]);


      // marker hover
      onMakerHoverBatch(allMakers.concat(gifMarker), ({ latlng }) => {
        this.latlng = latlng;
        L.popup({ closeButton: false })
          .setLatLng(latlng)
          .setContent(this.$refs.popup)
          .openOn(map);
      });

      onMakerOutBatch(allMakers.concat(gifMarker), () => {
        map.closePopup();
      });

    },
    zoomAndCenter() {
      this.polygon.setStyle({ opacity: 0});
      this.map.flyToBounds(POS_JYDS.concat(this.allMakers.map(item => item.getLatLng())), {duration: 1.25})
      setTimeout(() => {
        this.polygon.setStyle({ opacity: 1});
      }, 1250);

    }
  },
};
</script>
  
  <style>
* {
  margin: 0;
  padding: 0;
}
#map {
  height: 80vh;
}

.popup {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 0.5);
}

.leaflet-echart-icon{
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.5);
}

.panel {
  width: 100px;
  height: 500px;
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
}

.panel-btn {
  background-color: rgba(255, 0, 0, 0.5);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
</style>
  